<template>
  <div class="home">
    <!-- 我们的优势 -->
    <div class="container-fluid fff">
      <div class="q-banner">
        <p class="handleClick" @click="experience">立即体验</p>
      </div>
      <div class="container youshilist">
        <el-row>
          <el-col :span="24">
            <div class="grid-content margintop30">
              <div class="advantage">
                <small>Our strengths</small>
                <h2 class="advantage-title">我们的优势</h2>
                <p class="line"></p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item,index) in advantageList" :key="index">
            <div class="grid-content advantagelist">
              <img :src="item.img" alt />
              <ul>
                <li class="list-title1">{{item.title}}</li>
                <li class="list-title2">{{item.smallTitle}}</li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 精品课程 -->
    <div class="container-fluid F8FCFF">
      <div class="container">
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <div class="advantage">
                <small>Intensive course</small>
                <h2 class="advantage-title">精品课程</h2>
                <p class="line"></p>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 课程标题 -->
        <el-row>
          <el-col :span="20" :push="2">
            <div class="kecheng-wrap">
              <div class="kecheng-wrap-list">
                <ul class="curriculum-title-list clearfix">
                  <li
                    class="curriculum-title-list-item"
                    v-for="(item,index) in courseTitle"
                    :key="index"
                    @click="kechengClick(item)"
                    :class="{active:item.subject_name==curriculumItem}"
                  >{{item.subject_name}}</li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 课程列表 -->
        <el-row>
          <el-col :span="24">
            <course :course="coursed"></course>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 我们的团队 -->
    <div class="container-fluid fff">
      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            <div class="advantage">
              <small>Our team</small>
              <h2 class="advantage-title">我们的团队</h2>
              <p class="line"></p>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="teacher-wrap">
            <div class="container">
              <div class="teacher-header">
                <div class="teacher-name">
                  <span style="position: relative;right: 16px;">{{teacher.real_name}}</span>
                </div>
                <img :src="teacher.teacher_icon" class="image" /> 
                <!-- 有图片-后放开 -->
                <!-- <img src="~/assets/image/person.png" class="image" /> -->
              </div>
              <div class="teacher-info">
                <p>{{teacher.describe}}</p>
                <el-rate
                  class="star-num"
                  v-model="teacher.star_num"
                  disabled
                  text-color="#ff9900"
                  score-template="{teacher.star_num}"
                ></el-rate>
                <span>{{teacher.star_num}}.0</span>
                <ul class="teacher-samll-header">
                  <li>
                    <img :src="teacherimg1" alt class="fuhao" />
                  </li>
                  <li
                    v-for="(item,index) in teacherList"
                    :key="index"
                    @click="selectTeacher(index)"
                    :class="{actvie:selectindex==index}"
                  >
                    <p class="zhezhao"></p>
                    <img :src="item.head_icon" alt class="small-header" />
                  </li>
                  <li>
                    <img :src="teacherimg3" alt class="fuhao" />
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="more-wrap">
        <div @click="moreTeacher" class="morelist">更多优质老师</div>
      </div>
    </div>
    <!-- 新聞咨詢 -->
    <div class="container-fluid F7F7F7">
      <div class="container">
        <el-row class="margintop30">
          <el-col :span="12">
            <div class="grid-content">
              <p class="newtitle">
                新闻资讯
                <span>精雕细琢 机制精品</span>
              </p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content text-r">
              <el-link href="https://element.eleme.io" target="_blank" class="newsmore">查看更多&gt;</el-link>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content news-left">
              <el-carousel :interval="4000" type="card" height="200px" indicator-position="none">
                <el-carousel-item v-for="item in 6" :key="item" label="item">
                  <h3 class="medium">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content news-right">
              <ul>
                <li class="news-right-list" v-for="(item,index) in newsList" :key="index">
                  <ul class="news-date">
                    <li class="news-date-top">{{item.create_at | formDays}}</li>
                    <li class="news-date-bottom">{{item.create_at | formData}}</li>
                  </ul>
                  <ul class="news-content-list">
                    <li>
                      {{item.title|ellipsis(22)}}
                      <span
                        :class="{hidden:item.key_word==''}"
                      >{{item.key_word}}</span>
                    </li>
                    <li class="answers">{{item.description|ellipsis(60)}}</li>
                  </ul>
                  <el-image class="fr" :src="imgUrl5" fit="fill"></el-image>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 软件下载 -->
    <div class="container-fluid">
      <el-row>
        <div class="software">
          <el-col :span="11" :push="13">
            <ul class="course-title-wrap">
              <li class="course-big-title">天成课堂在线教育平台</li>
              <li class="course-big-title">正式版 V1.0.0</li>
              <li class="course-small-title margintop30">更新时间：2020-07-15</li>
              <li class="course-small-title">支持：iOS / Android</li>
              <li @click="experience" class="software-down-btn">立即下载</li>
            </ul>
          </el-col>
        </div>
      </el-row>
    </div>
    <!-- 关于我们 -->
    <div class="container-fluid fff">
      <!-- <van-image width="100%" :src="imgUrl" /> -->
      <div class="container">
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <div class="advantage">
                <small>About us</small>
                <h2 class="advantage-title">关于我们</h2>
                <p class="line"></p>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content text-r qaimg">
              <el-image style="width: 348px" :src="imgUrl4" fit="contain"></el-image>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content qawrap">
              <ul class>
                <li>
                  <h4 class="questions">
                    <em>Q1：</em>
                    <span>关于我们</span>
                  </h4>
                  <p class="answers">
                    <em>A1：</em>
                    <span>北京龙德天成教育科技有限公司成立于2016年，总部坐落于北京市。是一家专注 职业培训为一体的综合教育科技公司。</span>
                  </p>
                </li>
                <li>
                  <h4 class="questions">
                    <em>Q2：</em>
                    <span>关于我们</span>
                  </h4>
                  <p class="answers">
                    <em>A2:</em>
                    <span>公司自成立以来，始终坚持“龙行天下，德育九洲”和“为国家输送人才，为个人 提供发展”为核心理念，坚守“创新·专业·共赢”的经营宗旨，致力于让每一位学员获得更有效学习内容为已任，汇聚专业师资团队，整合社会优质资源，搭建人才交流和企业合作平台，为每一位学员提供个性化“一站式”服务。</span>
                  </p>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import course from "../components/kecheng/list";
// import func from '../../vue-temp/vue-editor-bridge';
export default {
  name: "Home",
  data() {
    return {
      value: 4.0,
      imgUrl4: require("../assets/image/aboutUs.png"),
      imgUrl5: require("../assets/image/qaimg.png"),
      advantageList: [
        {
          img: require("../assets/image/advantage1.png"),
          title: "教学变革",
          smallTitle:
            "智群发展，智能推进，决策基于数据，学校和区域教育教育治理现代化和智能化。"
        },
        {
          img: require("../assets/image/advantage2.png"),
          title: "智慧学习",
          smallTitle:
            "学习环境网络化、数字化、智能化。信息技术与教育主流业务深度融合。"
        },
        {
          img: require("../assets/image/advantage3.png"),
          title: "互联网+模式教学",
          smallTitle:
            "存储系统、资源运营、智慧录播、互动教研。做到教育资源平衡，高效便捷。"
        },
        {
          img: require("../assets/image/advantage4.png"),
          title: "专业导师团队",
          smallTitle:
            "教育新模式，互联网、大数据、人工智能相打造。探索智能校园建设。"
        }
      ],
      curriculumItem: "",
      teacherimg1: require("../assets/image/teacherleft.png"),
      teacherimg2: require("../assets/image/smallteacher.png"),
      teacherimg3: require("../assets/image/tearchright.png"),
      // 课程分类
      courseTitle: [],
      // 精品课程
      courseList: [],
      coursed: [],
      // 新闻列表
      newsList: [],
      // 我们的团队
      teacherList: [],
      teacher: {},
      selectindex: 0
    };
  },
  components: {
    course
  },
  filters: {
    //字数
    ellipsis: function(value, num) {
      if (!value) return "";
      value = value.toString();
      if (value.length > num) {
        return value.slice(0, num) + "...";
      }
      return value;
    },
    // 年月日
    formData: function(value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
    // 日
    formDays: function(value) {
      var date = new Date(value);
      var day = date.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return day;
    }
  },
  created() {
    this.newsData();
    this.teacherData();
    this.courseListd();
  },
  methods: {
    //更多教师
    moreTeacher() {
      this.$router.push("/teacher");
    },
    // 立即体验
    experience() {
      this.$router.push("/downloadApp");
    },
    // 精选课程
    courseListd() {
      this.$axios
        .post("/index/course", {
          dns: "testwo.admin.longde999.cn"
        })
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            this.courseTitle = res.data.subjectOne;
            this.curriculumItem = res.data.subjectOne[0].subject_name;
            this.courseList = res.data.course;
            this.coursed=this.courseList[1]
          }
        });
    },
    kechengClick(item) {
      this.curriculumItem = item.subject_name;
      this.coursed= this.courseList[item.id];
    },
    // 新闻列表
    newsData() {
      this.$axios
        .post("/index/news", {
          dns: "testwo.admin.longde999.cn"
        })
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            this.newsList = res.data;
          }
        });
    },
    parseTime() {},
    //我们的团队
    teacherData() {
      this.$axios
        .post("/index/teacher", {
          dns: "testwo.admin.longde999.cn"
        })
        .then(res => {
          if (res.code == 200) {
            console.log(res.data);
            this.teacherList = res.data;
            this.teacher = this.teacherList[0];
          }
        });
    },
    selectTeacher(index) {
      this.teacher = this.teacherList[index];
      this.selectindex = index;
    }
  }
};
</script>
<style scoped lang="less">
.activeTab {
  background: skyblue;
}
.fff {
  background-color: #fff;
}
.F8FCFF {
  background-color: #f8fcff;
}
.F6F6F6 {
  background-color: #d7e3f7;
}
.F7F7F7 {
  background-color: #f7f7f7;
  overflow: hidden;
}
.margintop30 {
  margin-top: 30px;
}
.q-banner {
  position: relative;
  height: 80vh;
  background: url(~static/image/indexbg.png) center/cover no-repeat;
  background-size: 100% 100%;
  background-color: #0dacfc;
}
.software {
  position: relative;
  height: 60vh;
  background: url("../assets/image/softwarebg.png") center/cover no-repeat;
  background-size: 100% 100%;
}
.hidden {
  visibility: hidden;
}
.handleClick {
  position: absolute;
  bottom: 30%;
  left: 19%;
  width: 120px;
  height: 28px;
  line-height: 28px;
  background-color: #fdb634;
  color: #fff;
  text-align: center;
  border-radius: 24px;
  font-size: 12px;
  cursor: pointer;
}
.advantage {
  color: #999999;
  margin: 40px auto;
  font-size: 16px;
  text-align: center;
}
.advantage-title {
  padding: 8px 0;
  margin: 0 auto;
  color: #000033;
  font-size: 20px;
  letter-spacing: 2px;
}
.line {
  width: 32px;
  height: 3px;
  background: rgba(15, 173, 252, 1);
  border-radius: 2px;
  margin: 0 auto;
}
.advantagelist {
  text-align: center;
  padding: 30px 36px;
}
.advantagelist img {
  width: 126px;
  height: 110px;
}
.advantagelist .list-title1 {
  line-height: 34px;
  color: #88cbaf;
  font-size: 16px;
  margin-top: 30px;
}
.youshilist {
  margin: 40px auto 0px;
  padding-bottom: 40px;
}
.advantagelist .list-title2 {
  line-height: 26px;
  color: #aaaaaa;
  font-size: 14px;
}
.advantagelist:hover {
  background: #fefff9;
}

.kecheng-wrap {
  position: relative;
  height: 64px;
  width: 100%;
  margin-bottom: 20px;
}
.curriculum-title-list {
  display: inline-table;
}
.kecheng-wrap::-webkit-scrollbar {
  display: none;
}
.curriculum-title-list-item {
  float: left;
  cursor: pointer;
  margin-right: 20px;
  margin-bottom: 10px;
  padding: 3px 5px;
}
.active {
  color: #fff;
  background-color: #0fadfc;
}
/* 我们的团队 */
.teacher-wrap {
  margin-top: 80px;
  width: 100%;
  background: url("../assets/image/teacherbg.png") center/cover no-repeat;
  background-size: 100% 100%;
  .teacher-header {
    display: inline-block;
    position: relative;
    margin-right: 30px;
    .teacher-name {
      position: absolute;
      right: 0;
      width: 60px;
      height: 108px;
      text-align: center;
      -webkit-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      color: #75bef3;
      letter-spacing: 4px;
      font-size: 20px;
      background: url(../assets/image/teachername.png) center/cover no-repeat;
    }
  }
  img.image {
    display: inline-block;
    width: 304px;
    height: 414px;
    margin-top: -80px;
    vertical-align: bottom;
  }
  .teacher-info {
    p {
      max-height: 76px;
      line-height: 26px;
      color: #fff;
      font-size: 14px;
      overflow: hidden;
    }
    span {
      color: #fff;
    }
    width: 65%;
    display: inline-block;
    word-spacing: 8px;
    vertical-align: top;
    padding-top: 10px;
  }
}
.teacher-samll-header {
  position: absolute;
  bottom: 14px;
  display: inline-table;
  width: 392px;
  li {
    position: relative;
    float: left;
    width: 72px;
    height: 72px;
    margin-right: 6px;
    margin-top: 6px;
    .zhezhao {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background: rgba(51, 51, 51, 0.7);
    }
    img.fuhao {
      width: 26px;
      height: 24px;
      margin-left: 12px;
    }
    img.small-header {
      max-width: 72px;
      max-height: 72px;
      cursor: pointer;
    }
  }
}
.teacher-samll-header li:hover .zhezhao,
.teacher-samll-header .actvie .zhezhao {
  display: none;
}
.star-num {
  padding-top: 10px;
}
// 软件下载
.course-title-wrap {
  position: relative;
  top: 24vh;
}
.course-big-title {
  color: #fff;
  font-size: 20px;
  line-height: 34px;
}
.course-small-title {
  color: #fff;
  font-size: 12px;
  line-height: 32px;
}
.margintop30 {
  margin-top: 30px;
}
.software-down-btn {
  cursor: pointer;
  width: 140px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background: #fbb732;
  color: #fff;
  font-size: 12px;
  border-radius: 24px;
}
/* 新聞資訊 */
.newtitle {
  line-height: 20px;
  font-size: 16px;
  color: #333;
  text-indent: 10px;
  border-left: 2px solid #27a4fe;
}
.newtitle span,
.newsmore {
  padding-left: 12px;
  font-size: 12px;
  color: #999;
}
.news-left,
.news-right {
  padding: 20px 10px;
  margin: 14px auto 30px;
  background: #fff;
}
.news-right-list {
  cursor: pointer;
  padding: 12px 0;
  border-bottom: 1px solid #dfdfdf;
}
.news-right-list:hover .news-content-list,
.news-right-list:hover .news-content-list > .answers {
  color: #27a4fe;
}
.news-right-list:hover .news-date {
  border: 1px solid #27a4fe;
  color: #27a4fe;
}
.news-right-list:hover .news-date-top {
  color: #fff;
  background: #27a4fe;
  cursor: pointer;
}
.news-right-list:last-child {
  border-bottom: none;
}
.news-date {
  display: inline-table;
  width: 80px;
  height: 64px;
  border: 1px solid #787d82;
  text-align: center;
}
.news-date-top {
  width: 100%;
  height: 50%;
  line-height: 32px;
  background: #787d82;
  color: #fff;
}
.news-date-bottom {
  width: 100%;
  height: 50%;
  line-height: 32px;
  font-size: 12px;
}
.news-content-list {
  display: inline-block;
  width: 70%;
  padding: 0 14px;
  line-height: 32px;
  font-size: 14px;
  vertical-align: top;
}
.news-content-list span {
  padding: 4px;
  background: #27a4fe;
  color: #fff;
  font-size: 12px;
}
/*問答  */
.qawrap {
  position: relative;
  top: 40px;
  left: 30px;
}
.questions {
  line-height: 28px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-top: 10px;
}
.answers {
  line-height: 26px;
  font-size: 12px;
  color: #999;
}
.questions em,
.answers em {
  display: inline-block;
  width: 10%;
  text-align: center;
  vertical-align: top;
}
.questions span,
.answers span {
  display: inline-block;
  width: 80%;
  text-align: left;
}
.qaimg {
  margin-right: 10%;
  margin-bottom: 40px;
}
.more-wrap {
  display: flex;
  align-items: center;
  height: 100px;
  background: #fff;
  line-height: 100px;
}
.morelist {
  cursor: pointer;
  width: 140px;
  height: 24px;
  line-height: 24px;
  margin: 0 auto;
  text-align: center;
  color: #27a4fe;
  font-size: 12px;
  border: 1px solid #27a4fe;
  border-radius: 24px;
}
// 轮播
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>